import { Card } from 'antd'
import { cloneDeep } from 'lodash'
import { render } from 'react-dom'

import Slardar, { createBrowserClient } from '@slardar/web'

import { TriggerEvent } from './event'
import { TriggerPageview } from './pageview'

declare global {
  interface Window {
    SdkClient: typeof import('@slardar/web').default
  }
}

const localSlardar = createBrowserClient()
const s = window.SdkClient
// copy global properties
if (s) {
  ;['p'].forEach((name) => {
    localSlardar.provide(name, cloneDeep(s[name]))
  })
}

const $root = document.querySelector('#app')
const start = () => {
  window.SdkClient('start')
  Slardar.start()
  localSlardar.start()
}

const triggerCustomEvent = () => {
  window.SdkClient('sendEvent', {
    name: 'custom-event',
    metrics: {
      a: 3,
    },
    categories: {
      b: '3',
    },
  })

  Slardar('sendEvent', {
    name: 'custom-event',
    metrics: {
      a: 3,
    },
    categories: {
      b: '3',
    },
  })

  localSlardar('sendEvent', {
    name: 'custom-event',
    metrics: {
      a: 3,
    },
    categories: {
      b: '3',
    },
  })
}

const triggerCustomLog = () => {
  window.SdkClient('sendLog', {
    content: 'custom-event',
    extra: {
      a: 3,
      b: '3',
    },
    level: 'error',
  })
  Slardar('sendLog', {
    content: 'custom-event',
    extra: {
      a: 3,
      b: '3',
    },
    level: 'error',
  })
  localSlardar('sendLog', {
    content: 'custom-event',
    extra: {
      a: 3,
      b: '3',
    },
    level: 'error',
  })
}

const triggerCapture = () => {
  window.SdkClient('captureException', new Error('manual captureException'), { extraKey: 'extra info' })
  Slardar('captureException', new Error('manual captureException'), { extraKey: 'extra info' })
  localSlardar('captureException', new Error('manual captureException'), { extraKey: 'extra info' })
}

const triggerSetTimeoutError = () => {
  setTimeout(() => {
    throw new Error('setTimeout error')
  }, 0)
}

const App = () => {
  return (
    <div className="app">
      <style>
        {`* {
          margin: 0;
          padding: 0
        }`}
      </style>
      <Card>
        <h1>Slardar SDK</h1>
        <p>Testing by cypress</p>
        <button id="start" onClick={start}>
          Start
        </button>
        <TriggerEvent />
        <TriggerPageview />
        <button id="trigger-custom-event" onClick={triggerCustomEvent}>
          trigger-custom-event
        </button>
        <button id="trigger-custom-log" onClick={triggerCustomLog}>
          trigger-custom-log
        </button>
        <button id="trigger-capture" onClick={triggerCapture}>
          trigger-capture
        </button>
        <button id="trigger-setTimeout-error" onClick={triggerSetTimeoutError}>
          trigger-setTimeout-error
        </button>
      </Card>
    </div>
  )
}

const delay = new URL(location.href).searchParams.get('delay')
if (delay) {
  setTimeout(() => {
    render(<App />, $root!)
  }, parseInt(delay))
} else {
  render(<App />, $root!)
}

Slardar('init', { ...Cypress.env().config, bid: 'npm' })
Slardar('on', 'init', () => {
  Slardar?.getSender()?.setSize(0)
  Slardar?.getSender()?.setWait(0)
})
localSlardar('init', { ...Cypress.env().config, bid: 'local' })
localSlardar('on', 'init', () => {
  localSlardar?.getSender()?.setSize(0)
  localSlardar?.getSender()?.setWait(0)
})
